<!--
 * @Author: ljc
 * @Date: 2024-09-09 14:45:12
 * @LastEditors: g05047
 * @LastEditTime: 2025-03-19 11:08:38
 * @Description: 操作按钮组数据表格
-->
<template>
  <div style="height: 100%;">
    <VfDataTable ref="tableRef"
      v-bind="tableOptions">
      <template #toolbar_left>
        <el-button plain
          size="small"
          type="primary"
          @click="handleClick('add')">新增行</el-button>
        <el-button plain
          size="small"
          type="danger"
          @click="handleClick('delete')">删除行</el-button>
      </template>
      <template #drag_lot>
        <VfIcon name="move"
          class="drag-btn" />
      </template>
    </VfDataTable>
    <CodeEditorDialog ref="codeDialogRef"
      :="codeDialogAttrs"
      @confirm="handleCodeEditorConfirm" />
  </div>
</template>

<script setup>
import { VfDataTable } from '@/components/vf-table';
import { useTableColumns } from '@/components/dialogs/src/button-group-widget/components/cfg/button-table-columns.js'
import { useRowHandle } from '@/components/dialogs/src/button-group-widget/components/hooks/useRowHandle.js'
import { useSortHandle } from '@/components/dialogs/src/button-group-widget/components/hooks/useSortHandle.js'
import { ref, reactive, onMounted, nextTick, inject, watch, onBeforeMount } from 'vue';
import { CodeEditorDialog } from '@/components/dialogs'

const busiConfig = inject('busiConfig')
const props = defineProps({
  fieldOptions: { type: Array, default: [] },
  optionModel: Object,
});
const tableRef = ref('')
// 表格配置
const tableOptions = reactive({
  data: [],
  stripe: false,
  columns: [],
  loading: false,
  keyField: 'id',
  boxConfig: true,
  seqConfig: false,
  pagerConfig: false,
  showOverflow: 'ellipsis',
  toolbarConfig: { enabled: true, refresh: false },
  checkboxConfig: { checkStrictly: false },
});
const codeDialogRef = ref()
const codeDialogAttrs = reactive({
  title: '代码编辑',
  frontAlert: '',
  showFooter: true,
  behindAlert: '}'
})

watch(
  () => props.fieldOptions,
  (newValue, oldValue) => {
    if (newValue && newValue.length) {
      initTableColumns();
    }
  },
  { deep: false, immediate: false },
);
/**
 * 初始化TableColumns
 */
const initTableColumns = () => {
  tableOptions.columns = useTableColumns().getColumns()
}
/**表格hooks */
const { handleClick, handleCodeEditorConfirm } = useRowHandle({
  props,
  tableRef,
  tableOptions,
  codeDialogRef,
  codeDialogAttrs,
  busiConfig,
})
initTableColumns()
/**表格拖拽 */
const { handleRowDrop } = useSortHandle({
  tableRef,
  tableOptions
})
handleRowDrop()
</script>

<style lang="scss" scoped>
</style>